<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style for="put-the-out-wrap">
        .wrap{
            width: 648px;
            margin: 130px auto;
        }
    </style>
    <style for="train-pagination">
        /*trainpagination*/
        .pagination-wrap {
            position: relative;
            height: 360px;
            margin-bottom: 70px;
        }

        .pagination {
            position: absolute;
            top: 60px;
            width: 596px;
            height: 204px;
            text-align: center;
            margin-left: 25px;
        }

        .train {
            /*margin: 10px auto;*/
            padding-bottom: 3px;
            width: 530px;
            position: relative;
            font-size: 0;
            height: 65px;
        }

        @keyframes move-railway {
            0% {
                background-position: left 100% top -26px
            }
            /*50%{background-position: left 50% top -26px}*/
            100% {
                background-position: left 0% top -26px
            }
        }

        .train:after { /*这是画铁路*/
            content: '';
            position: absolute;
            bottom: 0px;
            left: 0;
            width: 100%;
            height: 10px;
            background-image: url(/img/train-pagination-sprite.png);
            background-size: 129px 106px;
            background-position: 0px -26px;
            background-repeat: repeat-x;
            transform: translateZ(0);
            animation: move-railway linear 12s infinite;
        }

        .pagination-control-bar {
            margin-top: 14px;
        }

        .pagination ul {
            text-align: center;
        }

        ul, li {
            display: inline-block;
        }

        .train li.train-head,
        .train li {
            position: relative;
            font-size: 12px;
            display: inline-block;
        }

        .train li {
            padding-top: 20px;
            padding-left: 10px;
            width: 84px;
            height: 12px;
            background-color: rgba(100, 200, 100, .2);
            background-image: url(/img/train-pagination-bg.jpg);
            background-size: 340px 55px;
            background-position: left -24px top -8px;
            background-repeat: no-repeat;
            line-height: 0px;
        }

        .train li:last-of-type {
            width: 78px;
        }

        .train li:last-of-type:before {
            -moz-border-radius-topright: 30px;
            width: 88px;
            height: 14px;
            /*bottom: 1px;*/
        }

        .train li:after,
        .train li:before { /*这是车箱底盘以下和轮子下半截*/
            content: '';
            position: absolute;
            left: 0;
            bottom: -12px;
            height: 13px;
        }

        /*是车箱底盘以下和轮子下半截*/
        .train li:before {
            z-index: 2;
            left: -2px;
            right: 0;
            background-color: #3F7C15;
            width: 89px;
            border-radius: 3px;
        }

        /*.train li:last-of-type:after,*/
        .train li:after {
            content: '';
            position: absolute;
            left: -.5px;
            width: 100px;
            height: 13px;
            background-image: url(/img/train-pagination-bg.jpg);
            background-size: 360px 112px;
            background-position: left -128px bottom -18px;
            background-repeat: no-repeat;
            -webkit-filter: hue-rotate(100deg) saturate(50%) grayscale(50%);
            -moz-filter: saturate(100%) grayscale(5%);
            -ms-filter: saturate(100%) grayscale(5%);
            filter: hue-rotate(100deg) saturate(50%) grayscale(50%);
        }

        .train li.train-head,
        .train li.train-head .head-mask {
            width: 90px;
            background-color: rgba(100, 200, 100, .2);
            background-image: url(/img/train-pagination-bg.jpg);
            background-repeat: no-repeat;
        }

        .train li.train-head:before {
            bottom: 0;
            left: -3px;
            width: 91px;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }

        .train li.train-head {
            width: 86px;
            background-size: 360px 124px;
            height: 56px;
            /*top: -13px;*/
            bottom: 33px;
            right: 0px;
            background-position: right -40px bottom -20px;

            /*background-size: 358px 120px;*/
            /*height: 58px;*/
            /*!* top: -13px; *!*/
            /*bottom: 33px;*/
            /*right: 0px;*/
            /*background-position: right -40px bottom -20px;*/
        }

        .train li.train-head:after {
            bottom: -2px;
            left: 0px;
            width: 102px;
            background-position: left -223px bottom -8px;
        }

        .train li {
            -webkit-filter: saturate(62%) grayscale(5%);;
            -moz-filter: saturate(62%) grayscale(5%);
            -ms-filter: saturate(62%) grayscale(5%);
            filter: saturate(65%) grayscale(5%);
        }

        .train li.page-wrap {
            position: relative;
            top: -14px;
            padding-top: 14px;
            padding-left: 0;
            padding-bottom: 6px;
            padding-right: 10px;
        }

        .train a {
            position: relative;
            display: inline-block;
            /*display: block;*/
            height: 18px;
            width: 57px;
            text-align: center;
            color: #2a4;
        }

        .train-head a.head-mask {
            z-index: 1;
            position: absolute;
            right: 12px;
            bottom: -2px !important;
            background-color: #fff;
            width: 82px !important;
            height: 10px;
        }

        .train-head a.head-mask:before {
            position: relative;
            display: inline-block;
            right: -36px;
            content: '';
            width: 18px;
            height: 4px;
            background-color: #9da4a6;
            border-top: 0;
            border-top-width: 0px;
            border-top-style: initial;
            border-top-color: initial;
            bottom: -4px;
        }

        .train-head a.head-mask:after {
            bottom: -1px;
            right: -4px;
            content: '';
            position: absolute;
            /*right: -30px;*/
            width: 74px;
            height: 5px;
            background-color: #9a989b;
        }

        .train a span {
            width: 60px;
            height: 20px;
            display: inline-block;
            position: absolute;
            left: -9px;
        }

        .train a:hover {
            color: #2f3;
        }

        @keyframes scroll {
            0% {
                transform: rotate(0deg);
            }
            50% {
                transform: rotate(180deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }

        .wheels:before,
        .wheels:after {
            z-index: 4;
            content: '';
            bottom: -23px;
            position: absolute;
            display: inline-block;
            width: 25px;
            height: 25px;
            background-image: url(/img/train-pagination-sprite.png);
            background-position: 0px 0px;
            background-repeat: no-repeat;
            transform: translateZ(0);
            animation: scroll 4s linear infinite;
        }

        .wheels:before {
            left: -20px;
        }

        .train li.train-head .wheels:after,
        .train li.train-head .wheels:before {
            bottom: -53px;
        }

        .train li.train-head .wheels:before {
            left: -7px;
        }

        .train .train-head a {
            bottom: -3px;
        }

        .train li a.text {
            position: absolute;
            background-size: 300px 66px;
            left: 23px;
            font-size: 12px;
            display: inline-block;
            height: 22px;
            line-height: 25px;
            width: 56px;
            background-color: #fff;
            bottom: 14px;
        }

        .train li a.text:before,
        .train li a.text:after {
            content: '';
            width: 100%;
            position: absolute;
            display: block;
            background-color: #64b567;
            left: 0;
        }

        .train li a.text:before {
            height: 1px;
            top: 0;
        }

        .train li a.text:after {
            height: 1px;
            bottom: 0;
        }

        .train .train-head a span {
            width: 52px;
            height: 20px;
            line-height: 9px;
        }

        .pagination.pagination-list:before {
            content: '';
            z-index: 1;
            position: absolute;
            background-color: #fff;
            width: 14px;
            height: 16px;
            right: -1px;
            bottom: 23px;
        }

        .page-wrap a input.page-input {
            outline: 0px;
            border: 0;
            margin: 0;
            margin-left: 4px;
            font-size: 12px;
            width: 61px;
            height: 11px;
            text-align: center;
            color: #2f3;
        }

        .page-wrap a.wheels {
            left: -4px;
        }

        .page-wrap a.wheels:before,
        .page-wrap a.wheels:after {
            bottom: -29px;
        }

        .page-wrap a.wheels:before {
            left: 0;
        }

        .page-wrap a.wheels:after {
            left: 43px;
        }

        .viner .pagination-control-bar {
            padding-top: 38px !important;
        }
    </style>
    <style for="compatible-train-pagination">

        .pagination-wrap {
            position: relative;
            height: 360px;
            margin-bottom: 70px;
        }

        .viner {
            position: relative;
            left: -2px;
            top: 0;
            width: 100%;
            height: 440px;
            padding-top: 20px;
            margin: 0px auto;
        }

        .vine {
            position: absolute;
            background-image: url(/img/vine-top.png), url(/img/vine-bottom.png);
            background-repeat: no-repeat;
            background-size: 648px 240px;
        }

        .vine.bottom,
        .vine.top {
            width: 100%;
            height: 120px;
        }

        .vine.top {
            top: 0;
            background-image: url(/img/vine-top.png);
            background-position: top 20px left 0;
        }

        .vine.bottom {
            bottom: 78px;
        url(/static/img/vine-bottom.png);
            background-position: bottom 0px left 0;
        }

        .vine.left,
        .vine.right {
            bottom: 198px;
            width: 100px;
            height: 143px;
            background-image: url(/img/vine-top.png), url(/img/vine-bottom.png);
        }

        .vine.left {
            background-position: left 0 top -100px, left -.5px bottom -131px;
            left: 0;
        }

        .vine.right {
            background-position: right 0 top -100px, right 1px bottom -131px;
            right: -1px;
        }

        .pagination-wrap {
            width: 100%;
            margin: 0 auto;
            height: 440px;
        }

        .viner .pagination-control-bar {
            padding-top: 38px !important;
            margin-bottom: 30px;
        }

    </style>
</head>
<body>
<div class="wrap">
    <div class="viner">
        <div id="pagination-group">
            <ul class="pagination-control-bar pagination train railway">
                <li class="disabled"><a class="wheels"> <span>上一页</span></a></li>
                <li><a class="wheels current"><span>第一页</span></a></li>
                <li class="page-wrap">
                    <a class="wheels" href="/article/2000">
                        <input placeholder="第1页" class="page page-input" name="page" type="text">
                    </a>
                </li>
                <li><a class="wheels"><span>下一页</span></a></li>
                <li class="train-head">
                    <a class="wheels"><span></span></a>
                    <a class="head-mask"></a>
                    <a class="text">尾页</a>
                </li>
            </ul>
            <ul class="pagination-list pagination train railway">
                <li><a class="wheels" href="/article/2000"><span>1</span></a></li>
                <li><a class="wheels" href="/article/2000"><span>2</span></a></li>
                <li><a class="wheels" href="/article/2000"><span>3</span></a></li>
                <li><a class="wheels" href="/article/2000"><span>4</span></a></li>
                <li><a class="wheels" href="/article/2000"><span>5</span></a></li>
            </ul>
        </div>
        <div class="vine top"></div>
        <div class="vine bottom"></div>
        <div class="vine right"></div>
        <div class="vine left"></div>
    </div>
</div>

</body>
</html>
